<template>

    <div class="person">
      <h2>一台汽车品牌{{ car.brand }}，价格{{ car.price }}</h2>
      <button @click="changeCarPrice">修改汽车价格</button>

      <ul>
        <li v-for="g in games " :key="g.id">{{ g.name }}</li>
      </ul>
      <button @click="changeFirstGame">修改第一游戏</button>

      <h2>测试：{{obj.a.b.c.d}}</h2>
      <button @click="test">测试</button>

    </div>



</template>

<script setup lang="ts">
import { reactive } from 'vue';

// 数据
let car = reactive({brand:"宝马",price:188888})

let games = reactive([
    {id:"1001",name:"王者荣耀"},
    {id:"1002",name:"萤火突击"},
    {id:"1003",name:"瓦罗兰特"},
])

// `reactive`定义的响应式数据是“深层次”的
let obj = reactive({
    a:{
        b:{
            c:{
                d:666
            }
        }
    }
})



//方法
function changeCarPrice(){
    car.price += 200
}

function changeFirstGame(){
    games[0].name ="CSGO"
}

function test(){
    obj.a.b.c.d = 20
}

</script>

<style scoped>
.person {
    background-color: aqua;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>